<template>
  <div class="page">
    <div class="weui-cells oditem">
      <div class="weui-cell">
        <div class="weui-cell__bd">产品</div>
      </div>
      <div class="weui-cell" v-for="(item,index) in arr2" :key="index">
        <div class="weui-cell__hd">
          <img :src="item.showPic" mode="widthFix">
        </div>
        <div class="weui-cell__bd">
          <div class="p_title">{{item.spName}}</div>
        </div>
        <div class="weui-cell__ft">
          <div class="p_number">x{{item.yxbj}}</div>
        </div>
      </div>

    </div>
    <div class="weui-cells oditem">
      <div class="weui-cell">
        <div class="weui-cell__bd">赠品</div>
      </div>
      <div class="weui-cell" v-for="(item,index) in arr1" :key="index">
        <div class="weui-cell__hd">
          <img :src="item.showPic" mode="widthFix">
        </div>
        <div class="weui-cell__bd">
          <div class="p_title">{{item.spName}}</div>
        </div>
        <div class="weui-cell__ft">
          <div class="p_number">x{{item.yxbj}}</div>
        </div>
      </div>
    </div>
    <div class="weui-cells">
      <a class="weui-cell weui-cell_access" href="/pages/coupon/main">
        <div class="weui-cell__bd">赠送优惠券</div>
        <div class="weui-cell__ft">查看全部</div>
      </a>
      <div class="weui-cell">
        <div class="weui-cell__bd">
<!--          <div class="coupon weui-flex">-->
<!--            <img class="coupon_bg" src="../../../static/images/archbg.png" mode="widthFix">-->
<!--            <div class="coupon_value">-->
<!--              <div class="coupon_number">5</div>-->
<!--              <div class="spec">折</div>-->
<!--            </div>-->
<!--            <div class="weui-flex__item coupon_info">-->
<!--              <div class="coupon_title">优惠券名称</div>-->
<!--              <div class="weui-flex">-->
<!--                <div class="weui-flex__item coupon_condition">满100元使用</div>-->
<!--              </div>-->
<!--              <div class="coupon_data">2019-03-12 12:23 至 2019-03-18</div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
    </div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">消费单号：</div>
            <div>{{objOrder.orderNo}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">顾客姓名：</div>
            <div>{{objOrder.member.username}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">消耗店铺：</div>
            <div>{{merchantObj.merchantName}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">服务时间：</div>
            <div>{{objOrder.serviceTime}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">服务状态：</div>
            <div>{{objOrder.serviceState==1?'服务中':objOrder.serviceState==2?'已完成':''}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">建议下次到店时间：</div>
            <div>{{objOrder.nextServiceTime}}</div>
          </div>
          <div class="gradebtn">
            <a @click="getMessage" >评价本次服务</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
   import * as appId from "@/utils/util"
   import {getTIme} from "@/utils/util"
export default {
  data () {
    return {
      current: 0,
      phone:"",
      userId:"",
      id:"",
      cardId:"",
      resultDetai:{},
      stuffIds:"",
      product:{},
      objOrder:{},
      productId:"",
      merchantObj:{},
      arr1:[],//赠品列表
      arr2:[],//订单
    }
  },
  onShow(){
    this.arr1=[];
    this.arr2=[];
    wx.setNavigationBarTitle({
      title: "消耗详情"
    })
    this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
    if(this.userInfo) {
      this.phone=this.userInfo.mobileNo;
      this.userId=this.userInfo.baseUserId;
      this. getDetail()



    }else{
      wx.showToast({
        title:'请先登录',
        icon: 'none',
        duration: 2000
      })
    }
  },
  onLoad(option){
     this.id=option.id;
  },
  methods: {
    getTIme,
    getMessage(){
      let url=`/pages/consumerate/main?cardId=${this.cardId}&stuffIds=${this.stuffIds}&productId=${this.productId}`;

      wx.navigateTo({ url })
    },
    getDetail(){
      this.$http.request({
                method:"post",
                url:"/v1.0/appletLogin/consumeOrderDetail",
                body:{
      					 "userId":this.userId,
      					  "phone":this.phone,
      					  "appid":appId.appId,
      					  "productId":this.id
      				   }
      }).then((data)=>{
        if(data.code==0){
          this.resultDetai=data.result;
          // this.arr1=[];
          // this.arr2=[];
          this.resultDetai.forEach((a,i)=>{
            this.productId=a.id;
            this.stuffIds=a.consumeOrder.stuffIds;
            this.cardId=a.consumeOrder.member.id;
            // if(a.saleOrder.orderFlag==3){
            this.objOrder=a.consumeOrder;
            this.objOrder.serviceTime=this.getTIme(this.objOrder.serviceTime)
            this.objOrder.nextServiceTime=this.objOrder.nextServiceTime?this.getTIme(this.objOrder.nextServiceTime):''
              this.arr1.push(a.saleOrderItem.product)
            // }else if(a.saleOrder.orderFlag==4){
                this.arr2.push(a.product)
            this.merchantObj=a.merchant
            // }
          })
        }else{
          wx.showToast({
            title: `${data.message}`,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.oditem .weui-cell{
  -webkit-box-align: inherit;
  -webkit-align-items: inherit;
  align-items: inherit;
}
.oditem img{
  width: 5em;
  height: 5em;
  margin-right: 0.6em;
  border-radius: 0.3em;
}
.p_price{
  color: #E4393C;
}
.p_number{
  color: #999;
  font-size: 0.9em;
}
.p_title{
  line-height: 1.8em;
}
.p_other{
  font-size: 0.8em;
  color:#888;
  line-height: 1.8em;
}
.p_total{
  color: #999;
  font-size: 0.9em;
}
.p_payment{
  color: #333;
  padding-bottom: 0.8em;
}
.p_payment span{
  color: #E4393C;
}
.cell_nb{
  padding-top: 0px;
  padding-bottom: 0px;
}
.cell_nb:before{
  display: none;
}
.coupon{
  position: relative;
  margin: 0.4em 0.8em;
  padding-bottom: 1em;
  overflow: hidden;
}
.coupon_bg{
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
.coupon_value{
  width: 33.3333%;
  text-align: center;
  position: relative;
}
.coupon_value .coupon_number{
  position: absolute;
  width: 100%;
  height: 2em;
  line-height: 2em;
  top: 50%;
  margin-top: -1em;
  left: 0px;
  color: #fff;
  font-size: 1.8em;
}
.coupon_value .spec{
  position: absolute;
  top: 0px;
  right: 0px;
  background: #FF787E;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  line-height: 1.4em;
  font-size: 0.8em;
  text-align: center;
  border: 1px #fff solid;
  color: #fff;
}
.coupon_info{
  position: relative;
  z-index: 99;
  padding: 0.6em;
}
.coupon_info .coupon_title{
  color: #333;
  font-size: 0.9em;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}
.coupon_info .coupon_condition{
  font-size: 0.8em;
  color: #FF787E;
}
.coupon_info .usebtn{
  width: 4.6em;
  height: 1.6em;
  color: #FF787E;
  border: 1px #FF787E solid;
  display: block;
  border-radius: 0.8em;
  line-height: 1.6em;
  text-align: center;
  font-size: 0.8em;
}
.coupon_info .usebtn_used{
  border: 1px #aaa solid;
  color: #999;
}
.coupon_data{
  font-size: 0.7em;
  color: #999;
  margin-top: 0.3em;
}
.txtrow div{
  font-size: 0.9em;
  color: #333;
  line-height: 1.8em;
}
.txtrow .weui-flex__item{
  color: #999;
}
.txtrow .red{
  color: #FF787E;
}
.gradebtn{
  text-align: right;
  padding: 0.8em 0px 0.6em 0px;
}
.gradebtn a{
  background: #FF787E;
  color: #fff;
  width: 8em;
  height: 2em;
  display: inline-block;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  font-size: 0.9em;
}
</style>
